<template>
    <div>
        <!-- 搜索导航 -->
       <searchNav :isShowsearchPanel='isShowsearchPanel'/>
       <!-- 联动列表 -->
       <div class="shop">
           <!-- 左边 -->
           <div class="menu-wrapper">
               <ul>
                   <li class="menu-item" :class="{current:currentIndex === index}" 
                        v-for="(goods,index) in searchgoods" 
                        :key="index" 
                        @click="clickLeftItem(index)" 
                        ref="menuList"> 
                       <span>{{goods.name}}</span>
                   </li>
                   
               </ul>
           </div>
           <!-- 右边 -->
           <div class="shop-wrapper">
               <ul ref='shopsParent'>
                   <li class="shops-li" v-for="(goods,index1) in searchgoods" :key="index1">
                       <div class="shops-title">
                           <h4>{{goods.name}}</h4>
                           <a href="">查看更多 ></a>
                       </div>

                        <ul class="phone-type" v-if="goods.tag == 'phone'">
                            <li v-for="(phone,index3) in goods.category" :key="index3">
                                <img :src="phone.icon" alt="">
                            </li>
                        </ul>
                        <ul class="shops-items">
                            <li  v-for="(item,index2) in goods.items" :key="index2">
                                <img :src="item.icon" alt="">
                                <span>{{item.title}}</span>
                            </li>    
                        </ul>
                   </li>
               </ul>
           </div>
       </div>
       <!-- 搜索面板 -->
       <searchPanel v-if="isShow" :isShowsearchPanel='isShowsearchPanel'/>
    </div>
</template>

<script>
import searchNav from './children/searchNav'
import searchPanel from './children/searchPanel'
import {mapState} from 'vuex'
import BScroll from 'better-scroll'

export default {
    name:"Search",

    data(){
        return{
            scrollY:0, //右侧列表滑动的Y轴坐标（实时更新）
            rightLiTops:[], //所有分类的头部位置
            isShow:false, //搜索面板显示
        }
    }, 

    components:{
        searchNav,
        searchPanel
    },
    
    computed:{
        ...mapState(['searchgoods']),
        currentIndex(){
            //获取数据
            const {scrollY,rightLiTops} = this;
            //获取索引
           return rightLiTops.findIndex((LiTop,index)=>{
                this._leftScroll(index);
                return scrollY >= LiTop && scrollY < rightLiTops[index + 1];
            });
        }
    },

    mounted(){
        this.$store.dispatch('reqSearchGoods')
    },

    watch:{
        searchgoods(){
            this.$nextTick(()=>{
                this._initBScroll();
                this._initRightLiTops(); 
            })
        }
    },

    methods:{
    //初始化
    _initBScroll(){
        //左边滚动
        this.leftScroll = new BScroll('.menu-wrapper',{
            scrollY: true,
            click: true
        });
        
        //右边滚动
        this.rightScroll = new BScroll('.shop-wrapper',{
            probeType:3
        }) 

        //监听右侧滑动事件
        this.rightScroll.on('scrollEnd',(position)=>{
            this.scrollY = Math.abs(position.y);
        })

    },

    //求出右边所有版块的头部位置
    _initRightLiTops(){
        //临时数组
        const tempArr =[];
        //定义变量记录高度
        let top = 0;
        tempArr.push(top);
        //遍历li取出高度
        let allLis = this.$refs.shopsParent.getElementsByClassName('shops-li');
        //假数组转换真数组
        let arr = Array.prototype.slice.call(allLis);
        arr.forEach(li => {
          top += li.clientHeight;
          tempArr.push(top);
        });

        //更新数据
        this.rightLiTops = tempArr;
    },

    //点击左边切换右边
    clickLeftItem(index){
        this.scrollY = this.rightLiTops[index];
        this.rightScroll.scrollTo(0,-this.scrollY,300);
    },

    //左侧联动
    _leftScroll(index){
        let menuList = this.$refs.menuList
        let el = menuList[index];
        this.leftScroll.scrollToElement(el,300,0,-100);

    },

    //设置搜索面板显示
    isShowsearchPanel(flag){
        this.isShow = flag
    }

    }
}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
    .shop{
       display flex
       position absolute
       top 60px
       bottom 50px 
       width 100%
       background-color #fff 
       overflow hidden
    }

    .menu-wrapper{
        background-color #e0e0e0
        width 80px
        flex 0 0 80px
    }

    .menu-item{
        width 100%
        height 60px
        background #fafafa
        display flex
        justify-content center
        align-items center
        font-weight lighter
        color #666
    }

    .current{
        color red
        position relative
    }

    .current::before{
        content ''
        background-color #e02e24
        width 4px
        height 20px
        position absolute
        left 0
    }

    .shop-wrapper{
        flex 1
        background-color #fff
    }

    .shops-title{
        display flex
        flex-direction row
        padding 0 10px
        height 44px
        align-items center
        justify-content space-between
        color #999
    }

    .shops-title a{
        color #999
        text-decoration none
        font-weight lighter
    }

    .shops-items{
        display flex
        flex-wrap wrap
    } 

    .shops-items li{  
        display flex
        flex-direction column
        width 33.3%
        height 96px
        justify-content center
        align-items center
        color #333
        font-size 14px
        
    }

    .shops-items li img{
        width 60%
        height 60%
        height auto
     }

     .phone-type{
         display flex
         width 100%
         flex-direction row
         flex-wrap wrap
         border-bottom 1px solid #ccc
     }
     
     .phone-type li{
         width 33.3%
         display flex
         justify-content center
         align-items center
         margin 5px 0
     }

     .phone-type li img{
         width 80%
         height auto
     }
</style>